Bei der Diskussion der am meisten unterschätzten Funktionen in TypeScript bleibt die as const-Behauptung oft unbeachtet. Diese Funktion ist in verschiedenen Szenarien unglaublich nützlich und bietet Entwicklern erhebliche Vorteile.

„as const“ verstehen

Zunächst definieren wir, was „const“ tut. Stellen Sie sich vor, Sie haben ein Objekt wie dieses:

const routes = {
  home: "/home",
  profile: "/profile",
  notifications: "/notification",
};

Wenn Sie mit der Maus über die Eigenschaften von Routen fahren, werden Sie feststellen, dass diese als Zeichenfolge eingegeben sind. Beispielsweise wird „routes.home“ als Zeichenfolge und nicht als „/home“ eingegeben. Dies liegt daran, dass TypeScript davon ausgeht, dass sich diese Eigenschaften ändern könnten, und leitet sie daher als veränderliche Zeichenfolgen ab.

Betrachten Sie nun eine Funktion, die nur diese spezifischen Routen akzeptieren sollte. Sie könnten die Typen wie folgt definieren:

function changeRoute(route: "home" | "profile" | "notifications") {
  // navigate to route
}

Dieser Ansatz funktioniert, ist jedoch repetitiv und fehleranfällig. Wenn Sie eine neue Route hinzufügen, müssen Sie die Typdefinition der Funktion aktualisieren, was nicht ideal ist.

Objekte unveränderlich machen

Hier kommt as const ins Spiel. Durch die Verwendung von „as const“ können Sie das Objekt unveränderlich machen, und TypeScript leitet die Literaltypen statt nur Zeichenfolgen ab.

const routes = {
  home: "/home",
  profile: "/profile",
  notifications: "/notification",
} as const;

Jetzt wird „routes.home“ als „/home“, „routes.notifications“ als „/notifications“ usw. eingegeben. Diese Unveränderlichkeit stellt sicher, dass diese Eigenschaften nicht geändert werden können und TypeScript ihre spezifischen Werte erkennt.

Praktischer Anwendungsfall

Lassen Sie uns als const in eine Funktion integrieren:

function changeRoute(route: typeof routes[keyof typeof routes]) {
  // navigate to route
}

Hier ruft typeofroutes den Typ des Routenobjekts ab und keyoftypeofroutes extrahiert die Schlüssel, was zu den genauen Typen der Routenwerte führt. Dadurch kann die Funktion an alle Änderungen im Routenobjekt angepasst werden, ohne dass wiederholte Aktualisierungen erforderlich sind.

Typen extrahieren

Ein weiterer wichtiger Aspekt von as const ist die Art und Weise, wie es die Typextraktion ermöglicht. Zum Beispiel:

type Routes = (typeof routes)[keyof typeof routes];

Diese Art von Definition extrahiert dynamisch die Werte des Routenobjekts, wodurch die Funktion besser wartbar ist und Redundanz reduziert wird.

Abschluss

Die as const-Assertion in TypeScript ist eine vielseitige und leistungsstarke Funktion, die die Typsicherheit erheblich verbessern und Redundanz in Ihrem Code reduzieren kann. Durch die Unveränderlichkeit von Objekten und die Ermöglichung einer präzisen Typinferenz wird die Pflege und Erweiterung von Codebasen vereinfacht. Probieren Sie es aus und Sie werden sehen, wie es Ihre TypeScript-Projekte verbessern kann!
Viel Spaß beim Codieren!

[Offenlegung: Dieser Artikel ist eine Gemeinschaftsarbeit, bei der meine eigenen Ideen mit der Unterstützung von ChatGPT für eine verbesserte Artikulation kombiniert werden.]